<template>
  <div class="userDate">
    <el-button @click="back">返回</el-button>
    <h3>本周排班人员情况一览表</h3>
    <div class="address">
      <div class="left">地区：</div>
      <user-address
        :defaultValue="defaultAddress"
        ref="AddAddress"
        @countryChange="getPerson"
        seletStyle="width:220px"
      />
    </div>
    <div class="list" v-for="(patient, index) in patientList" :key="index">
      <div class="name">{{patient.userName}}</div>
      <el-tag v-if="patient.workTimes.length>0"
              :key="index2"
              v-for="(tag,index2) in patient.workTimes"
              :disable-transitions="false">
              {{tag.date}}<el-checkbox  v-model="tag.shangwu">上午</el-checkbox><el-checkbox  v-model="tag.xiawu">下午</el-checkbox>
      </el-tag>
    </div>
  </div>
</template>

<script>
const queryString = require("querystring");
import UserAddress from "../../../../components/address";
export default {
  name: "userDate",
  data() {
    return {
      defaultAddress: null,
      patientList: [],
      searchForm: {
        province: "",
        city: "",
        country: ""
      }
    };
  },
  mounted() {
    this.getPerson();
  },
  components: {
    UserAddress
  },
  methods: {
    getPerson() {
      let addressParams = this.$refs.AddAddress.getData();
      this.searchForm.province = addressParams.province;
      this.searchForm.city = addressParams.city;
      this.searchForm.country = addressParams.country;
      this.api
        .get("/groundPerson?" + queryString.stringify(this.searchForm))
        .then(res => {
          if (res.code == 200) {
            this.patientList = res.data.list;
            for(var i=0;i<res.data.list.length;i++){
               if(res.data.list[i].workTimes){
                   this.patientList[i].workTimes=JSON.parse(res.data.list[i].workTimes)
               }
            }
            
            console.log(this.patientList)
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    back() {
      this.$router.back(-1);
    }
  }
};
</script>

<style lang="less" scoped>
.userDate {
  padding-left: 20px;
  h3 {
    margin: 20px 0;
  }
  .address {
    .left {
      margin-bottom: 10px;
    }
  }
  .list {
    margin-top: 20px;
    .list-date {
      margin-top: 10px;
    }
  }
}
.el-tag + .el-tag {
    margin-left: 10px;
  }
 .el-tag .el-checkbox {
  margin-left:10px;
} 
</style>
